<template>
	<div class="fullscreen">
		<sh-card class="mb-3" title="全部展示">
			<sh-query v-bind="formConfig1" :items="items"> </sh-query>
		</sh-card>
		<sh-card class="mb-3" title="支持收起(配合表格使用)">
			<sh-query v-bind="formConfig2" :items="items"> </sh-query>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'HighQuery',
	data() {
		return {
			items: [
				{
					title: '左侧',
					span: 12,
					children: [
						{
							title: '姓名',
							field: 'name',
							search: 1,
							renderRequire: true,
							renderProps: {},
							requireProps: [
								{
									required: true,
									validator: () => {
										return new Error('999')
									}
								}
							]
						},
						{
							title: '性别',
							field: 'sex',
							search: 1,
							renderRequire: false,
							renderName: '$vSelect',
							renderProps: {
								options: [
									{ label: '男', value: '1' },
									{ label: '女', value: '2' }
								]
							}
						},
						{
							title: '手机号码',
							field: 'tel',
							search: 1,
							renderRequire: false
						},
						{
							title: '年龄',
							field: 'age',
							search: 1,
							renderRequire: false,
							renderName: '$vInput',
							renderProps: {
								type: 'integer',
								min: 1,
								max: 150
							}
						},
						{
							title: '出生日期',
							field: 'birthday',
							search: 1,
							renderRequire: false,
							renderName: '$vTime',
							renderProps: {}
						},
						{
							title: '身份证号',
							field: 'idCard',
							search: 1,
							renderRequire: false
						},
						{
							title: '身高',
							field: 'height',
							search: 1,
							renderRequire: false,
							renderName: '$vInput',
							renderProps: {
								type: 'number',
								min: 1,
								max: 300,
								suffixText: '厘米/CM'
							}
						},
						{
							title: '体重',
							field: 'weight',
							search: 1,
							renderRequire: false,
							renderName: '$vInput',
							renderProps: {
								type: 'number',
								min: 1,
								max: 300,
								suffixText: '公斤/Kg'
							}
						},
						{
							title: '邮编',
							field: 'postCode',
							search: 1,
							renderRequire: false,
							renderName: '$vInput',
							renderProps: {
								type: 'integer',
								maxlength: 6
							}
						},
						{
							title: '电子邮箱',
							field: 'email',
							search: 1,
							renderRequire: false
						}
					]
				},
				{
					title: '右侧',
					span: 12,
					children: [
						{
							title: '购买数量',
							field: 'buyNumber',
							span: 24,
							search: 1,
							renderRequire: false,
							renderName: '$vInput',
							renderProps: {
								type: 'number',
								control: true
							}
						},
						{
							title: '婚否',
							field: 'isMerry',
							span: 24,
							search: 1,
							renderRequire: false,
							renderName: '$vSwitch',
							renderProps: {
								options: []
							}
						},
						{
							title: '联系地址',
							field: 'contactAddress',
							span: 24,
							renderRequire: false,
							renderName: '$vTextArea',
							renderProps: {
								maxlength: 150
							}
						}
					]
				},
				{
					title: '籍贯',
					field: 'jiguan',
					search: true,
					span: 12,
					renderName: '$vTree',
					renderProps: {
						multiple: false,
						options: [
							{ id: '1', label: '北京' },
							{ id: '2', label: '黑龙江' },
							{ id: '3', label: '吉林' },
							{ id: '4', label: '辽宁' },
							{ id: '5', label: '山东' },
							{ id: '6', label: '陕西' },
							{ id: '7', label: '山西' },
							{ id: '8', label: '湖南' },
							{ id: '9', label: '湖北' },
							{ id: '10', label: '上海' },
							{ id: '11', label: '广东' },
							{ id: '12', label: '广西' }
						]
					}
				}
			],
			formConfig1: {
				loading: false,
				footer: true,
				data: {}
			},
			formConfig2: {
				loading: false,
				footer: true,
				data: {},
				globalConfig: {
					formToggleNum: 4,
					formToggle: true
				}
			}
		}
	},
	created() {},
	mounted() {},
	methods: {
		onFormSubmit() {}
	}
}
</script>

<style scoped></style>
